<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-07 09:31:36
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-29 15:48:40
 * @FilePath: \cxl-driving-training\src\views\system\protocol\edit\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="protocol-edit-container">
        <el-form
            ref="ruleFormRef"
            :model="data.protocol"
            :rules="data.rules"
            label-width="120px"
            style="width: 100%; display: flex; flex-wrap: wrap"
        >
            <el-form-item label="协议名称：" prop="code" style="width: 100%">
                <div class="protocol-input">
                    <el-select
                        v-model="data.protocol.code"
                        style="width: 100%"
                        placeholder="选择协议"
                        @change="data.onSelectProtocol"
                    >
                        <el-option
                            v-for="item in data.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="应用渠道：" prop="channel" style="width: 100%">
                <div class="protocol-input">
                    <el-checkbox-group v-model="data.protocol.channel">
                        <el-checkbox
                            v-for="item in channelOptions"
                            :key="item.name"
                            :label="item.label"
                            :name="item.name"
                        />
                    </el-checkbox-group>
                </div>
            </el-form-item>
            <el-form-item label="协议号：" prop="version" style="width: 100%">
                <div class="protocol-input">
                    <el-input disabled v-model="data.protocol.version"></el-input>
                </div>
            </el-form-item>
        </el-form>

        <div class="protocol-title">
            <div class="title">
                <i>*</i>
                <p>协议内容：</p>
            </div>
            <div class="content">
                <TinymceVue :content="data.protocolContent" @update="data.onContentUpdate" />
            </div>
        </div>

        <div class="btn">
            <el-button type="primary" @click="onConfirm(ruleFormRef)">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import TinymceVue from '@/components/Tinymce.vue'
import { FormInstance } from 'element-plus'
import { channelOptions, ProtocolEditData } from './index'
import { routerStore } from '@/store/router.store'
import router from '@/router'
const _routerStore = routerStore()

/**
 * form表单实例
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 初始化数据
 */
const data = reactive(new ProtocolEditData())

/**
 * 监听点击保存
 * @param formEl
 */
const onConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            data.onSubmit(() => {
                //重置表单
                //formEl.resetFields()
                onCancel()
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}
const onCancel = () => {
    console.log(_routerStore.selectIndex)
    _routerStore.removeHeaderRoute(_routerStore.selectIndex)
    router.push('/protocol-list')
}
</script>

<style scoped lang="scss">
.protocol-edit-container {
    box-sizing: border-box;
    padding: 16px;
    background-color: var(--color-white);

    .protocol-line {
        display: flex;
        margin: 16px 0;
    }

    .protocol-input {
        width: 300px;
    }

    .protocol-title {
        display: flex;
        width: 100%;
        font-size: 14px;

        i {
            color: var(--color-danger);
            padding: 0 4px 0 0;
        }

        .title {
            font-size: 14px;
            width: 120px;
            display: flex;
            justify-content: end;
            height: 32px;
            line-height: 32px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
        .content {
            width: calc(100% - 120px);
        }
    }

    .btn {
        padding: 32px 0;
        text-align: center;
    }
}
</style>
